<!--服务中心详情-->
<template>
  <div class="service">
    <div class="online">
      <div class="onlineone">
        <i class="iconfont icon-zaixiankefu"></i>
        <p>在线客服</p>
      </div>
      <div class="onlinetwo">
        <i class="iconfont icon-dianhua"></i>
        <p>在线客服</p>
      </div>
    </div>
    <div class="hot">
      <h4>热门问题</h4>
    </div>
    <div class="leibiao">
       <div class="Chot_issue">
            <van-cell is-link to="" v-for="(item,index) in fusj" :key="index"  :title="item.title" @click="c_houti(index)"/>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);
export default {
    name:"Service",
   data: function () {
    return {
      fusj: [],
    };
  },
  methods: {
      c_houti(index){
          this.$router.push({name:"ServiceCenter",params:{_id:this.fusj[index]}}) 
      }
  },
  watch: {
    $route: {
      handler: function () {
        let url = "https://elm.cangdu.org/v3/profile/explain";
        this.$axios.get(url,{param:{}})
          .then((res) => {
            console.log(res);     
            let text = [];
            let reg = /[\u4E00-\u9FA5]/g;
            for (const key in res) {
              if (reg.test(res[key])) {
                if (res[key].match(reg).length <= 8) {
                    let Obj = {}
                    Obj.name =key;
                    Obj.title = res[key];
                    text.push(Obj)
                }
              }
            }
            for (const key in res) {
                for(let i = 0;i < text.length;i++){
                    var keys = text[i].name.split("C")[0]+"Content";
                    if(key == keys){
                        let Obj = {}
                        Obj.name = text[i].name;
                        Obj.title = text[i].title;
                        Obj.result = res[key];
                        this.fusj.push(Obj)
                        continue
                    }
                }
            }
            this.fusj.splice(16,1)
            this.fusj.splice(18,1)
            console.log(this.fusj);
          })
          .catch((err) => console.log(err));
      },
      immediate: true,
    },
  },
}
</script>
<style lang="less">
.service {
  .online {
    text-align: center;

    .onlineone {
      width: 50%;
      height: 94px;
      float: left;
      border: 1px solid #f5f5f5;
      box-sizing: border-box;
      padding-top: 25px;
      background-color: #fff;
      i {
        font-size: 25px;
        color: rgb(255, 123, 82);
      }
      p {
        margin-top: 8px;
        font-size: 16px;
        color: #666;
      }
    }
    .onlinetwo {
      width: 50%;
      height: 94px;
      float: left;
      border: 1px solid #f5f5f5;
      box-sizing: border-box;
      padding-top: 25px;
      background-color: #fff;
      i {
        font-size: 25px;
        color: rgb(106, 194, 11);
      }
      p {
        margin-top: 8px;
        font-size: 16px;
        color: #666;
      }
    }
  }
  .hot {
    background-color: #fff;
    h4 {
      color: #333;
      line-height: 71px;
      border-bottom: 1px solid #f5f5f5;
      padding-left: 0.7rem;
    }
  }

  .leibiao {
    color: #666;
  }
}
</style>